<template>
	<el-row :gutter="40">
		<el-col :span="6">
			点击节点整行可展开
			<dataTree :tree-data="treeData" click-node-expand :tree-config="treeConfig" />
		</el-col>
		<el-col :span="6">
			显示复选框，默认展开全部
			<dataTree v-model="checkNode" :tree-data="treeData" show-checkbox expand-all :tree-config="treeConfig" @checkNode="getCheckNode" />
		</el-col>
		<el-col :span="6">
			不高亮选中节点
			<dataTree :tree-data="treeData" no-high-node show-checkbox expand-all :tree-config="treeConfig" />
		</el-col>
		<el-col :span="6">
			点击节点勾选选中
			<dataTree :tree-data="treeData" check-on-click-node no-high-node show-checkbox expand-all :tree-config="treeConfig" />
		</el-col>

		<el-col :span="6">
			展开的节点保存下载，刷新数据不会收起
			<el-button @click="resetTree">点击刷新树</el-button>
			<dataTree :tree-data="treeData" click-node-expand no-high-node :tree-config="treeConfig" />
		</el-col>

		<el-col :span="6">
			<el-button @click="getCheckedNodes">获取选中节点</el-button>
			<dataTree ref="getcheckedTree" show-checkbox :tree-data="treeData" click-node-expand :tree-config="treeConfig" />
		</el-col>

		<el-col :span="6">
			<el-button @click="setCheckedNodes">设置节点选中</el-button>
			<el-button @click="getKeys">获取选中keys</el-button>
			<dataTree ref="setcheckedTree" show-checkbox :tree-data="treeData" click-node-expand :tree-config="treeConfig" />
		</el-col>

		<el-col :span="6">
			懒加载
			<dataTree lazy :load-node-fun="loadNodeFun" show-checkbox click-node-expand :tree-config="treeConfig" />
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: "TreeMessage",
	components: { dataTree: () => import("@/components/tree_view/index") },
	data() {
		return {
			treeData: [
				{
					title: "1",
					key: "1",
					list: [],
				},
				{
					title: "2",
					key: "2",
					list: [
						{
							title: "3",
							key: "3",
							list: [
								{ title: "4", key: "4", list: [] },
								{ title: "5", key: "5", list: [] },
							],
						},
						{ title: "6222222222222222222222222222222222222222222222221", key: "6", list: [] },
					],
				},
				{
					title: "7",
					key: "7",
					list: [
						{ title: "8", key: "8", list: [] },
						{ title: "9", key: "9", list: [] },
						{ title: "10", key: "10", list: [] },
					],
				},
				{ title: "11", key: "11", list: [] },
			],
			treeConfig: {
				label: "title",
				id: "key",
				children: "list",
			},
			checkNode: { key: "2" },
			setList: ["1", "4", "5", "9"],
		};
	},
	watch: {
		checkNode() {
			console.log(this.checkNode);
		},
	},
	created() {},
	beforeDestroy() {},
	destroyed() {},
	methods: {
		getCheckNode(e) {
			console.log(e);
		},
		resetTree() {
			this.treeData = [
				{ title: "11111", key: "11111", list: [] },
				{
					title: "2",
					key: "2",
					list: [
						{ title: "2.1", key: "2.1", list: [] },
						{ title: "2.2", key: "2.2", list: [] },
					],
				},
				{
					title: "3",
					key: "3",
					list: [
						{ title: "3.1", key: "3.1", list: [] },
						{ title: "3.2", key: "3.2", list: [] },
						{ title: "3.3", key: "3.3", list: [] },
					],
				},
			];
		},
		getCheckedNodes() {
			const data = this.$refs.getcheckedTree.getCheckedNodesByKeys();
			console.log(data);
		},
		setCheckedNodes() {
			this.$refs.setcheckedTree.setCheckNodeByKeys(this.setList);
		},
		getKeys() {
			const data = this.$refs.setcheckedTree.getCheckedNodesByKeys();
			console.log(data);
		},
		loadNodeFun(node, resolve) {
			if (node.level === 0) {
				this.num = 0;
				return resolve([{ title: "region", key: "1" }]);
			}
			if (node.level > 5) return resolve([]);

			setTimeout(() => {
				const data = [
					{
						title: "leaf",
						key: this.num++,
						leaf: true,
					},
					{
						key: this.num++ + "2",
						title: "zone",
					},
				];

				resolve(data);
			}, 500);
		},
	},
};
</script>

<style lang="scss" scoped>
.el-row {
	margin: 0 !important;
}
.el-col {
	height: 300px;
	display: flex;
	flex-direction: column;
	border: 1px solid red;
}
</style>
